﻿<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <title>登录</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" th:src="@{/front/js/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/front/js/layui.js}"></script>
    <link th:href="@{/front/css/login2.css}" rel="stylesheet" type="text/css"/>
</head>

<body>
<h1>云租房<sup></sup></h1>

<!--
表单内容
-->
<div class="login" style="margin-top:50px;">

        <div class="header">
            <div class="switch" id="switch"><a class="switch_btn_focus" id="switch_qlogin" href="javascript:void(0);"
                                               tabindex="7">快速登录</a>
                <a class="switch_btn" id="switch_login" href="javascript:void(0);" tabindex="8">快速注册</a>
                <div class="switch_bottom" id="switch_bottom" style="position: absolute; width: 64px; left: 0px;"></div>
            </div>
        </div>


        <div class="web_qr_login" id="web_qr_login" style="display: block; height: 300px;">

            <!--登录-->
            <div class="web_login" id="web_login">


                <div class="login-box">

                    <div class="login_form">
                        <form th:action="@{/user/login}" id="log_user" accept-charset="utf-8" method="post">
                           <!-- <input type="hidden" name="status" value="1"/>
                            <input type="hidden" name="to" value="log"/>-->
                            <div class="cue">
                                    <span style='color: red'>
                                        <b id="login_err"></b>
                                     </span>
                            </div>
                            <div class="uinArea" id="uinArea">
                                <label class="input-tips" for="user_longin">账号：</label>
                                <div class="inputOuter" id="uArea">

                                    <input type="text" id="user_longin" name="username" class="inputstyle"/>
                                </div>
                            </div>
                            <div class="pwdArea" id="pwdArea">
                                <label class="input-tips" for="log_pwd">密码：</label>
                                <div class="inputOuter" id="pArea">

                                    <input type="password" id="log_pwd" name="uPassword" class="inputstyle"/>
                                </div>
                            </div>

                            <div style="padding-left:50px;margin-top:20px;">
                                <input type="button" id="log" value="登 录" style="width:150px;" class="button_blue"/>
                            </div>
                        </form>
                    </div>
                    <br>
                    <div style="margin-left:143px;margin-top:35px;"><a th:href="@{/admin/login}">管理员登录</a></div>
                </div>
            </div>
            <!--登录end-->
        </div>

        <!--注册-->
        <div class="qlogin" id="qlogin" style="display: none; ">

            <div class="web_login">
                <form accept-charset="utf-8" th:action="@{/user/register}" method="post" id="reg_user">
                    <input type="hidden" name="status" value="2"/>
                    <input type="hidden" name="did" value="0"/>
                    <ul class="reg_form" id="reg-ul">

                        <div id="userCue" class="cue">
                            <span style='color: red'>
                                <b id="err">快速注册请注意格式</b>
                            </span>
                        </div>

                        <li>
                            <label for="user" class="input-tips2">用户名：</label>
                            <div class="inputOuter2">
                                <input type="text" id="user" name="username" maxlength="16" class="inputstyle2"/>
                            </div>
                        </li>

                        <li>
                            <label for="passwd" class="input-tips2">密码：</label>
                            <div class="inputOuter2">
                                <input type="password" id="passwd" name="uPassword" maxlength="16" class="inputstyle2"/>
                            </div>
                        </li>
                        <li>
                            <label for="passwd2" class="input-tips2">确认密码：</label>
                            <div class="inputOuter2">
                                <input type="password" id="passwd2" name="confirmPassword" maxlength="16" class="inputstyle2"/>
                            </div>
                        </li>
 <!--                      <li>
                            <label class="input-tips2">手机号：</label>
                            <div class="inputOuter2">
                                <input type="text" id="tel" name="tel" maxlength="16" class="inputstyle2"/>
                            </div>
                        </li>-->
                        <li>
                            <label class="input-tips2">验证码：</label>
                            <div class="inputOuter2">
                                <img id="captcha_img" th:src="@{/randomCode}" width="120" height="50" onclick="refreshCode()"/>
                                <a onclick="refreshCode()";>看不清？点击图片刷新</a>
                            </div>
                        </li>
                        <li>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
                            <input type="text" name="authCode" id="authCode" maxlength="16" class="inputstyle2">
                        </li>

                        <li>
                            <div class="inputArea">
                                <input type="button" id="reg" style="margin-top:10px;margin-left:85px;"
                                       class="button_blue" value="同意协议并注册"/>
                                <a href="#" class="zcxy" target="_blank">注册协议</a>
                            </div>

                        </li>
                        <div class="cl"></div>
                    </ul>
                </form>
            </div>
        </div>
        <!--注册end-->
    </div>
    <div class="suggest">*推荐使用ie8或以上版本ie浏览器或Chrome内核浏览器访问本站</div>
</div>
<script th:src="@{/front/js/layui/layui.js}"></script>
<script th:inline="javascript" type="text/javascript">
    layui.use(['form', 'layer', 'jquery'], function(){
        const form = layui.form;
        const $ = layui.jquery;
        const layer = layui.layer
        //登录验证
        $('#log').click(()=>{
            //layer.msg('见到你真的很高兴', {icon: 6});
            //tips层-右
            let user_longin = $('#user_longin');
            let login_err = $('#login_err')
            let username = $('#user_longin').val();
            let password = $('#log_pwd').val();
            if (username === "" || password ==="") {
                user_longin.focus().css({
                    border: "1px solid red",
                    boxShadow: "0 0 2px red"
                });
                layer.tips('用户名和密码不能为空', '#user_longin',{
                    tips: [2,'#d80f3e'] //还可配置颜色
                });
                return false;
            } else {
                user_longin.css({
                    border: "1px solid #D7D7D7",
                    boxShadow: "none"
                });
            }
            $.post({
                url: contextPath + '/user/userLoginVerify',
                data: {username: username, password: password},
                success: function (msg) {
                    if (msg !== "ok") {
                        login_err.text(msg);
                    }else {
                        $('#log_user').submit();
                    }
                },
            });
        });

    })
</script>
</body>
</html>